{% extends "enterprise/base.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/images/skin/minimal/blue.css">
    <link rel="stylesheet" type="text/css" href="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/js/dojo/dijit/themes/claro/claro.css">
{% endblock %}

{% block content %}
<script type="text/javascript">
    var primary_menu = "menu_0";
    var sub_menu = "menu_0_1";
</script>

    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3>地理位置</h3>
                </div>
                <!-- <div class="panel-title">
                    <label >企业地图中心点经度</label>
                        <input name="geo_x" id="geo_x" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div>
                <div class="panel-title">
                    <label >企业地图中心点纬度</label>
                    <input name="geo_x" id="geo_y" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div> -->

                <div class="panel-options">
                <a href="/basic/mapEdit/" class="bg"><button type="button" class="btn btn-info">编辑企业边界</button></a>
                </div>
            </div>


            <div class="panel-body" style="padding: 0px">
                <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">
                    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">
                        <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                    </div>
                </div>
                <div class="mapEdit">
                    <div class="panel panel-primary panel-collapse">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h4 class="heading">企业地图展示</h4>
                            </div>
                            <div class="panel-options" style="margin:4px 0px;">
                                <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <!-- panel body -->
                        <div class="panel-body">
                            <div class="">
                                <span>选择要展示的信息</span>
                            </div>
                            <hr/>
                            <div class="">
                                <ul>
                                    <li>
                                        <input data='production' checked type="checkbox">
                                        <span>生产区</span>    <!--接着上一行-->
                                    </li>
                                    <li>
                                        <input data='storage' checked type="checkbox">
                                        <span>储罐区</span>    <!--接着上一行-->
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary panel-collapse">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h4 class="heading">企业地图展示</h4>
                            </div>
                            <div class="panel-options" style="margin:4px 0px;">
                                <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <!-- panel body -->
                        <div class="panel-body">
                            <!-- <div class="">
                                    点击<label class="btn btn-white"><img width="12px" height="12px" src="/static/images/boundary.png"></label>绘制,双击鼠标结束绘制
                                </div>
                                <hr/> -->
                            <form method="post" action="">
                                <div class="clearfix">
                                    <label>存储方式</label>
                                    <select class="form-control" id="areaType">
                                        <option value="生产区">生产区</option>
                                        <option value="存储区">存储区</option>
                                    </select>
                                </div>
                                
                                <div id="toolbar" style="padding-left: 0px;padding-top:10px;padding-right: 0px;">
                                    <div class="btn-group toolbar" >
                                        <input type="hidden" value="{{ key }}" id="name" />
                                        <input type="hidden" value="" name="valuePolygon" id="valuePolygon" />
                                        <input type="hidden" value="" name="center" id="center" />
                                        <input type="hidden" value="" name="ids" id="ids" />
                                        <label style="margin-top:10px;float:left;margin-right:5px;">绘制范围</label>
                                        <label id="rangeStoreCell" class="btn btn-white">
                                            <img title="圈定{{ title }}范围" src="/static/images/boundary.png">
                                        </label>
                                        <label id="undo" class="btn btn-white" onclick="undoManager.undo()">
                                            <img src="/static/images/undo.png">
                                        </label>
                                        <label id="redo" class="btn btn-white" onclick="undoManager.redo();">
                                            <img src="/static/images/redo.png">
                                        </label>
                                    </div>
                                </div>
                                <div id="optionAreaDiv" class="">
                                    <hr>
                                    <!--查找数据 storage-->
                                    <div class="md">
                                        <input class="btn btn-info btn-block" type="button" value="提交"  onClick="submitRange();"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    </div>
            </div>
            <div id='_mapData' style='display:none;'>{{ mapData }}</div> <!--显示地图数据-->
            <div class="" id='mapPopHideArea' style="display:none">
                <table class="table table-bordered">
                    <thead>
                        <tr id='_headTr'>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
<script type="text/javascript">
        var geo_points = '[[118.8625067122916,32.21844640345126],[118.8641804107169,32.21964803308993],[118.86787113032139,32.21962657541781],[118.86793550333775,32.215335040993985],[118.8667553313712,32.21524921030551],[118.86587556681431,32.215335040993985],[118.86510309061802,32.21548524469882],[118.86458810648716,32.21578565210849],[118.86398729166783,32.21621480555087],[118.86366542658604,32.21670833200961],[118.86319335779942,32.217309146828946],[118.86244233927525,32.21844640345126],[118.86244233927525,32.21844640345126],[118.8625067122916,32.21844640345126]]';
        var key = 'truck';
</script>
<script type="text/javascript" src="/static/js/icheck.js"></script>
<script type="text/javascript" src="../../../static/js/toastr.js"></script>
<script type="text/javascript" src="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/init.js"></script>
<script type="text/javascript" src="/static/js/showMap.js"></script>
<script type="text/javascript" src="/static/js/showMapFn.js"></script>
<style type="text/css">
    .infowindow .window .top .right .user .content{
        font-size: 10px;
    }
    .infowindow .window .top .right .user .titlebar .title{
        font-size: 10px;
        font-weight:bold;
    }
</style>

<!-- <script type="text/javascript" src="/static/js/map.action.company.js"></script> -->

<script language="javascript">
    $(function(){
        $('input[type = checkbox]').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('input[type=checkbox]').bind('ifClicked',function(event){
            var _flag = this.checked;
            var _dataKey = this.getAttribute('data'); 
            var _graphics = mymap.graphics.graphics;
            for(var i=0; i<_graphics.length; i++){
                var _itemGraph = _graphics[i];
                if(_itemGraph.attributes){
                    if( _itemGraph.attributes.name == _dataKey){
                        if(_flag){
                            _graphics[i].hide();
                        }else{
                            _graphics[i].show();
                        }
                    }
                }
            }
        })
    })
</script>
<script type="text/javascript" >
    $(function(){
        $.showMapObj.init({
            dataMapURL     :'{{ mapDataURL }}',//地图信息
            dataURL        :'{{ dataURL }}',//单元数据
            dataPageURL    :'{{ dataPageURL }}',//分页
            dataSubmitURL  :'{{ dataSubmitURL }}',//提交地图信息
            dataStructure  :'{{ dataStructure }}'//显示的结构
        });
        $("#rangeStoreCell").bind('click',function(){
            var name = $('#name').val();       //'store'
            drowPolygon(name);
        });
    });
    function isExistInArr(_array, _element){  
        if(!_array || !_element) return false;  
        if(!_array.length){  
            return (_array == _element);  
        }  
        for(var i=0; i<_array.length; i++){  
            if(_element == _array[i]) return true;  
        }  
        return false;  
    }
    /*去除数组中重复元素的方法*/  
    function distinct(_array){  
        if(!_array || !_array.length) return _array;  
        var newArray = new Array();  
        for(var i=0; i<_array.length; i++){  
            var oEl = _array[i];  
            if(!oEl || this.isExistInArr(newArray, oEl)) continue;  
            newArray[newArray.length] = oEl;  
        }  
        return newArray;  
    }
    // function pageClick(el,command){    //this chang  page     点击的时候
    //     el = $(el);
    //     var _parent = el.parent()
    //     var _curPage = parseInt( _parent.attr('curPage') );
    //     var _maxPage = parseInt( _parent.attr('maxPage') );
    //     var _resultPage;
    //     if(command == 'page'){
    //         _resultPage = el.attr('data');
    //     }
    //     if(command == 'change'){
    //         var _number = parseInt( el.attr('data') );
    //         var _resultPage = _curPage + _number ;
    //         if( _resultPage <= 0 ){
    //             _resultPage = 1 ;
    //         }
    //         if( _resultPage > _maxPage  ){
    //             _resultPage = _maxPage ;
    //         }
    //     }
    //     var _dataURL = $.showMapObj.options.dataPageURL + _resultPage +'/'; ///company/store/size/10/page/
    //     var _options = {
    //         url:_dataURL,
    //         type:'GET',
    //         async:true,
    //         dataType:'json',
    //         beforeSend:function(){
    //             $('.showLoad').showLoading();   //闪动
    //         },
    //         success:function(_data){
    //             var _dataContent = $( el.parent().parent().find('table .dataList')[0] );
    //                 _dataContent.html('');
    //             var ids = $('#ids').val();
    //                 ids = ids.split(',');
    //             for(var i = 0; i < _data.length; i++){
    //                 var checked = '';
    //                 if( isExistInArr( ids, (_data[i].id+'') ) ){
    //                     checked = 'checked';
    //                 }
    //                 var _tr = '<tr>';
    //                     _tr+= '<td><input type="checkbox" '+ checked +' onClick="_checkEvent(this);" code='+_data[i]['id']+'></td>';
    //                     for(var j=0; j< $.showMapObj.data.dataStructure.length; j++){
    //                         var key = $.showMapObj.data.dataStructure[j];
    //                         _tr+= '<td>'+ _data[i][key] +'</td>';
    //                     }
    //                     _tr+= '</tr>';
    //                 _dataContent.append(_tr);
    //             }

    //             _parent.attr('curPage' , _resultPage );

    //            $('.showLoad').hideLoading();
    //         },
    //         error:function(){
    //            $('.showLoad').hideLoading();
    //         }
    //     }

    //     $.ajax(_options);     //获取数据  展示
    // }

    function _checkEvent(el){
        var flag = el.checked;

        var id = el.getAttribute('code');
        var ids = document.getElementById('ids').value;

        if(ids){
            ids = ids.split(',');
        }else{
            ids = [];
        }

        if(flag){
            if(isExistInArr(ids,id)){
                return;
            }

            ids.push(id);
        }else{
            var index = 0;
            
            for(var i=0; i<ids.length; i++){
                if( id === ids[i] ){
                    index = i;
                    break;
                }
            }

            ids.splice(index, 1)
        }

        ids = distinct(ids).join(',');

        document.getElementById('ids').value = ids;               //id 赋值
    }

    function submitRange(){ //提交
        //这里要做一个判断，如果没有画就不提交
        $('input[type=checkbox]').iCheck('destroy');
        var title="添加数据";
        var type=$("#areaType").val();
        toSubmitModal(title,type);
    }

    </script>
{% endblock %}